<template>
  <div>这是首页 - state</div>
  <!-- <p>doubleNum: {{ doubleNum }}</p> -->
  <p>count: {{ count2 }}</p>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>
  <p>likes: {{ likes }}</p>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      num: 100,
      like: "睡",
    };
  },

  // 仓库数据不要再data里面使用，会导致响应式失效  ×
  // data() {
  //   return {
  //     count: this.$store.state.count,
  //   };
  // },

  // 在组件里面只能通过计算属性来使用仓库的数据

  // 如果加了modules的模块化，那么数据在state里面会嵌套一层
  // computed: {
  //   count2() {
  //     // console.log(this.$store.state);
  //     return this.$store.state.a.count;
  //   },
  //   name() {
  //     return this.$store.state.a.name;
  //   },
  //   age() {
  //     return this.$store.state.a.age;
  //   },
  //   likes() {
  //     return this.$store.state.a.likes;
  //   },
  // },

  // mapState的数组语法
  // computed: mapState(["count", "name", "age", "likes"]),

  // mapState的对象语法
  // 组件自身如果也有计算属性，需要用到扩展运算符
  computed: {
    ...mapState({
      // count2: "count",
      // name: "name",
      count2: (state) => state.a.count,
      name: (state) => state.a.name,
      // 可以使用函数，处理仓库数据
      age: (state) => state.a.age * 2,
      // likes: (state) => [...state.likes, this.like],
      // mapState里面如果需要使用this，不能用箭头函数
      likes(state) {
        return [...state.a.likes, this.like];
      },
    }),
    doubleNum() {
      return this.num * 2;
    },
  },

  // computed: {
  //   doubleNum() {
  //     return this.num * 2;
  //   },
  // },
};
</script>
